<template>
  <div class="result">
    <div>
      <p class="jieguo">搜索结果：</p>
    </div>
    <ul>
      <li v-for="(song, index) in result" :key="index">
        <SongItem
          :item="song"
          :keywords="keywords"
          @play="$emit('play', $event)"
        ></SongItem>
      </li>
    </ul>
    <Loading v-if="showLoading"></Loading>
    <p class="loadmore" @click="loadMore" v-if="!showLoading">加载更多...</p>
  </div>
</template>

<script>
import Loading from "@/components/Loading.vue";
import SongItem from "@/components/SongItem.vue";
export default {
  name: "SearchResult",
  props: ["keywords"],
  data() {
    return {
      result: [],
      page: 1,
      showLoading: true,
      //   keywords: ''
    };
  },
  created() {
    this.result = [];
    this.loadSearch();
  },
  methods: {
    loadSearch() {
      let offset = (this.page - 1) * 30;
      this.$http
        .get("/search?keywords=" + this.keywords + "&type=1&offset=" + offset)
        .then((data) => {
          this.showLoading = false;
          // console.log(this.result);
          let r = this.result.concat(data.data.result.songs);
           let ids=[];
           r.forEach((item) =>{
             ids.push(item.id)
           })

          return ids;
        }).then((ids) => {
        
          // console.log(23445345)
              //   获取数据详情
              this.$http
                .get("http://music.kele8.cn/song/detail?ids=" + ids)
                .then((songData) => {
                  songData.data.songs.map((d) => {
                    d.song = {
                      artists: d.ar,
                    };
                    // console.log(d)
                   this.result.push(d);
                    return d;
                  });
                 
                });
            });
      
    },
    loadMore() {
      this.page++;
      this.showLoading = true;
      this.loadSearch();
    },
  },
  components: {
    Loading,
    SongItem,
  },
};
</script>

<style lang="less">
.result {
  div {
    .jieguo {
      margin: 10px 10px;
    }
  }
}
.loadmore {
  text-align: center;
  // border-top: 1px solid grey;
  padding: 10px 0;
}
</style>